<!-- eslint-disable max-len -->
<template>
  <div>
    <div class="menu-box">
      <div class="titleText">
        上海小馆
      </div>
      <div class="subTitleText">
        上海菜
      </div>
      <div class="all-category-box">
        <template v-if="foods.length">
          <div
            v-for="item in categories"
            :key="item._id"
            class="category-box"
          >
            <div class="titleText">
              {{ item.name['zh-CN'] }}
            </div>
            <div
              v-for="food in foodsGroup[item._id]"
              :key="food._id"
              class="menu-food-item"
              :class="food.available ? '': 'unchecked'"
            >
              <div
                class="containerBetween cursor"
                :class="['food-container',{'not-available' : !food.available}]"
                @click="addCart({food})"
              >
                <div class="menu-count">
                  <div class="menu-count-text">
                    {{ count(food._id) }}
                  </div>
                </div>

                <div class="menu-text cursor">
                  {{ food.name['zh-CN'] }}
                </div>
                <div class="menu-price cursor">
                  {{ food.price | currencyUSD }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <div v-else>
          no menu
        </div>
      </div>

      <!-- <CategoryView
        v-for="item in categories"
        :key="item.category._id"
        :item="item"
        class="category-box"
      /> -->

      <div class="menu-cart-container">
        <div class="menu-cart-content">
          <div class="cantainerBetween">
            <button
              v-if="isChange"
              class="menu-cart-closed"
              @click="close"
            >
              <img
                src=""
                alt=""
                class="menu-cart-closed-btn"
              >
            </button>
            <div :class="['containerBetween',{'container-expand':isChange}]">
              <div :class="['cart-left',{'cart-left-expand':isChange }]">
                <div class="containerCol">
                  <div
                    v-if="isChange"
                    class="containerRowCenter not-visible"
                  >
                    <img
                      src=""
                      alt=""
                    >
                  </div>
                  <div class="containerRowAlign horizontally not-visible" />
                </div>
              </div>
              <div :class="['menu-cart-main-container',{'menu-cart-main-container-expand':isChange}]">
                <div>
                  <div>
                    <div
                      v-if="!cart.length"
                      class="cart-empty-text"
                    >
                      选择加入购物车
                    </div>
                    <div
                      v-for="(cartItem , id) in cartList "
                      :key="id"
                    >
                      <!-- <template v-if="cartItem.length"> -->
                      <div class="containerBetween vertical cart-item">
                        <div class="cart-item-name">
                          {{ cartItem[0].name['zh-CN'] }}
                        </div>
                        <div class="containerRow">
                          <div class="cart-item-price">
                            {{ cartItem.length*cartItem[0].price | currencyUSD }}
                          </div>
                          <div
                            class="cart-remove-button"
                            @click="removeCart({food:cartItem[0]})"
                          >
                            -
                          </div>
                          <div class="cart-item-count">
                            {{ cartItem.length }}
                          </div>
                          <div
                            class="cart-add-button"
                            @click="addCart({food:cartItem[0]})"
                          >
                            +
                          </div>
                        </div>
                      </div>
                      <!-- </template> -->
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <button
                      v-if="cart.length"
                      class="menu-cart-subtotal-btn"
                      @click="change"
                    >
                      {{ total |currencyUSD }}
                    </button>
                    <button
                      v-else
                      disabled
                      class="menu-cart-subtotal-btn"
                    >
                      $0.00
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <button
                class="menu-cart-subtotal-btn"
                disabled
              >
                {{}}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapMutations, mapActions, mapState, mapGetters,
} from 'vuex';
import _ from 'lodash';
// import current from '@/filter/price';
// import CategoryView from '@/views/menu/components/CategoryView.vue';

export default {
  components: {
    // CategoryView,
  },
  data() {
    return {
      isChange: false,
      foods: [],
      categories: [],
      foodsGroup: [],
    };
  },
  computed: {
    ...mapGetters(['total']),
    ...mapState({
      cart: (state) => state.cart.cart,
    }),

    cartList() {
      return _.groupBy(this.cart, '_id');
    },
    // count() {
    //   const result = _.groupBy(this.cart, '_id');
    //   console.log('result=====', result);
    //   // eslint-disable-next-line no-underscore-dangle
    //   console.log(this.foodsGroup.length);
    //   // eslint-disable-next-line no-underscore-dangle
    //   return result[this.food] ? result[this.food].length : 0;
    // },
  },
  created() {
    this.loadMenu();
  },
  methods: {
    ...mapActions(['addCart', 'removeCart']),
    ...mapMutations(['saveUser', 'showErr', 'showLoading', 'hideLoading', 'addFood', 'removeFood']),

    change() {
      this.isChange = true;
    },
    close() {
      this.isChange = false;
    },
    async loadMenu() {
      try {
        this.loading = true;

        const result = await this.$api.get('/api/menu/restaurantId/5828c5cf343b990011e79e91');
        this.foods = result.foods;
        this.categories = result.categories;
        this.foodsGroup = _.groupBy(this.foods, 'category._id');
        // this.categories.map((category) => {
        // eslint-disable-next-line no-underscore-dangle
        // this.foods.filter((food) => this.food.category._id === category._id);
        // });
        // ? 目标数据：[{ category: {...},foods:[{food1}，{food2}]},{ }]
      } catch (error) {
        this.showErr({ message: error.message });
      } finally {
        this.loading = false;
      }
    },
    count(id) {
      const result = _.groupBy(this.cart, '_id');
      // console.log('result=====', result);
      // eslint-disable-next-line no-underscore-dangle
      return result[id] ? result[id].length : 0;
    },
    // addFood(food) {
    //   if (!food.available) return;
    //   // eslint-disable-next-line no-underscore-dangle
    //   const findIndex = this.cartList.findIndex((cartItem) => cartItem._id === food._id);

    //   // eslint-disable-next-line no-underscore-dangle
    //   if (findIndex === -1) {
    //     this.$set(food, 'count', 1);
    //     this.cartList.push(food);
    //   } else {
    //     this.cartList[findIndex].count += 1;
    //   }
    // },
  },
};
</script>

<style scoped>

.all-category-box {
    width: 100%;
    max-width: 700px;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 12%;
    -webkit-column-gap: 12%;
    grid-column-gap: 12%;
    column-gap: 12%;
    margin-top: 69px;
}

.category-box {
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 70px;
}

.menu-box {
    position: relative;
    margin-top: 65px;
    margin-bottom: 50px;
    margin-left: 100px;
}

.titleText {
    font-size: 30px;
    cursor: pointer;
}
.text, .titleText {
    font-family: PingFangSC-Regular;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    color: #202020;
    letter-spacing: normal;
}

.subTitleText {
    width: 220px;
    height: 24px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    line-height: 1.5;
    color: #797979;
    letter-spacing: normal;
}
.containerBetween {
      justify-content: space-between;
    }
.containerBetween, .containerRow{
      display: flex;
      flex-direction: row;
      }

    .menu-food-item{
      position: relative;
    }

    .menu-price, .menu-text {
      margin-top: 30px;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      font-stretch: normal;
      line-height: 1.5;
      color: #202020;
      letter-spacing: normal;
      }

      .menu-text{
        width: 100%;
        max-width: 140px;
        height: auto;
        font-family: PingFangSC-Regular;
        cursor: pointer
      }

      .menu-price{
        height: 24px;
        font-family: PingFangSC;
        cursor: pointer;
      }

      .menu-cart-main-container{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 320px;
      max-height: 450px;
      padding: 15px 20px 20px;
      background: #f7f7f7;
      border: 1px solid #f7f7f7;
      box-shadow: 0 2px 8px 0 hsl(0deg 0% 57% / 50%);
      transition: all 3s linear;
      /* overflow: auto; */
      }

    .menu-cart-main-container>div:first-child {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

      /* .isChange{
        height: 670px;
        width: 500px;
        transition: height 2s width 2s 1s ;
      } */
      .cart-empty-text{
        height: 16px;
        margin-bottom: 16px;
        font-family: PingFangSC;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        font-stretch: normal;
        line-height: 16px;
        color: #afafaf;
        text-align: center;
        letter-spacing: normal;
      }

      .containerBetween, .containerRow{
        display: flex;
        flex-direction: row;
      }

      .vertical {
        align-items: center;
      }

      .cart-item{
        margin-bottom: 23px;
      }

        .cart-item-name, .cart-item-price{
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          font-stretch: normal;
          line-height: 30px;
          color: #202020;
          letter-spacing: normal;
        }

    .cart-item-price{
    height: 30px;
    margin-right: 5px;
    }

    .cart-add-button, .cart-remove-button {
    width: 29px;
    height: 30px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    background-color: #202020;
    text-align: center;
    cursor: pointer;
}
          .cart-remove-button{
            float: right;
            padding: 0;
            border: 0;
            border-top-left-radius: 15px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 15px;
          }

          .cart-item-count{
            width: 24px;
            height: 30px;
            font-family: PingFangSC-Regular;
            line-height: 30px;
            color: #fff;
            text-align: center;
            background-color: #202020;
          }

          .cart-add-button{
            padding: 0 0 0 10px;
            text-align: left;
            border: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 0;
            cursor: pointer;
          }

      .menu-cart-subtotal-btn{
        width: 100%;
        height: 40px;
        padding: 0 20px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        line-height: 1.5;
        color: #fff;
        cursor: pointer;
        background-color: #202020;
        border: 0;
        border-radius: 25px;
        transition: all .3s linear;
      }

      .menu-cart-content {
    position: absolute;
    right: calc((100vw - 1440px)/2 + 120px);
    bottom: calc(28vh - 187.6px);
}

.menu-cart-container {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    margin: auto;
}

.not-available{
    opacity: 0.4;
}

.menu-count-text {
    width: 24px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 24px;
    color: #6e6e6e;
    text-align: center;
}
.menu-count {
    position: absolute;
    top: 30px;
    left: -30px;
    width: 24px;
    height: 24px;
    background-color: #d8d8d8;
    border-radius: 24px;
}

.menu-cart-subtotal-btn:disabled {
    background: #afafaf;
}
.cart-left-expand {
    width: 450px;
    padding: 0 20px;
    overflow-y: hidden;
    border-right: 2px solid #ccc;
    box-shadow: none;
    transition: width .3s linear,padding .3s linear,opacity .3s cubic-bezier(.7,.07,1,-.07);
}

.cart-left-expand {
    width: 450px;
    padding: 0 20px;
    overflow-y: hidden;
    border-right: 2px solid #ccc;
    box-shadow: none;
    transition: width .3s linear,padding .3s linear,opacity .3s cubic-bezier(.7,.07,1,-.07);
}

.container-expand {
    padding: 15px 0 20px;
    background-color: #f7f7f7;
    box-shadow: 0 2px 8px 0 hsl(0deg 0% 57% / 50%);
}

.menu-cart-main-container-expand {
    width: 320px;
    height: 670px;
    padding: 0 20px;
    box-shadow: none;
}

.menu-cart-closed {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-right: 10px;
    background-color: transparent;
    border: 0;
}
.menu-cart-closed-btn {
    max-width: 56.3px;
    height: auto;
    cursor: pointer;
    margin-left: -55px
}

.containerRowCenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.visible {
    opacity: 1;
    transition: opacity .3s cubic-bezier(.7,.07,1,-.07);
}
</style>
